<template>
  <div class="detail container-fluid px-0 my-5 bg-light py-5">
    <div class="container-xxl d-flex justify-content-between flex-md-row flex-column flex-wrap px-0">
      <div class="col-12 col-md-6 .d-flex justify-content-center px-3">
        <img class="w-100 rounded-3" src="../../assets/img/c3789b818270476d9b48b8de610a626d.png" alt="">
      </div>
      <div class="col-12 col-md-5">
        <h6 class="mt-3 px-3 mt-md-0"><small>该作品拥有NFT Hero官方认证</small></h6>
        <h2 class="mt-3 px-3"><strong>豹子头-林冲</strong></h2>
        <h6 class="pb-3 px-3"><small>编号：#24/100<a href="#" class="text-danger text-decoration-none ms-1">选择其它编号</a></small></h6>
        <div class="bg-white mx-3 p-2 rounded-3 pt-3 my-2 my-md-4 my-lg-4 my-md-2 shadow">
          <h6 class="ps-2"><small>合约地址<a href="#" class="text-primary ms-3 text-decoration-none">0xd3d2...32fb</a> </small></h6>
          <h6 class="ps-2"><small>链上标识<a href="#" class="text-primary ms-3 text-decoration-none">248007</a></small></h6>
        </div>
        
        <card-buy></card-buy>
        <hr class="mt-3 mb-4 mt-lg-3 mb-lg-4 mt-md-1 mb-md-1 d-none d-md-block mx-3" />
        <!-- 创作者 -->
        <div class="d-flex align-items-center my-md-2 mt-4 px-3">
          <div class="rounded-circle  border border-secondary" style="width: 44px">
            <img class="mw-100" src="https://www.ibox.com/file/oss/nft/image/portrait/7d14151c3ea8407494d961016f1dcc82.png?style=st" alt="">
          </div>
          <div class="ms-3">
            <small>创作者</small>
            <div class="d-flex align-items-center flex-md-row flex-column">
              <p class="col-12 col-md-7 text-wrap text-break mb-0 h6">
                <small class="d-block d-md-none">0xf943b2f824a688c58af52529f2a37b603212d0b0</small>
                <span class="d-none d-md-block">0xf943b2f824a688c58af52529f2a37b603212d0b0</span>
              </p>
              <span class="d-none d-md-block">/</span>
              <a href="#" class="col-12 col-md-5 text-primary text-decoration-none ms-md-2">
                <small class="d-inline d-md-none">0xf943...d0b0</small>
                <span class="d-none d-md-inline">0xf943...d0b0</span>
                <img class="ms-1" style="width: 14px;height: 14px" src="" alt="">
              </a>
            </div>
          </div>
        </div>
        <hr class="mt-3 mb-4 mt-lg-3 mb-lg-4 mt-md-1 mb-md-1 d-block d-md-none mx-3" />
        <!-- 复制 创作者 -->
        <div class="d-flex align-items-center my-md-2 px-3">
          <div class="rounded-circle  border border-secondary" style="width: 44px">
            <img class="mw-100" src="https://www.ibox.com/file/oss/nft/image/portrait/7d14151c3ea8407494d961016f1dcc82.png?style=st" alt="">
          </div>
          <div class="ms-3">
            <small>创作者</small>
            <div class="d-flex align-items-center  flex-md-row flex-column">
              <p class="col-12 col-md-7 text-wrap text-break mb-0 h6">
                <small class="d-block d-md-none">0xf943b2f824a688c58af52529f2a37b603212d0b0</small>
                <span class="d-none d-md-block">0xf943b2f824a688c58af52529f2a37b603212d0b0</span>
              </p>
              <span class="d-none d-md-block">/</span>
              <a href="#" class="col-12 col-md-5 text-primary text-decoration-none ms-md-2">
                <small class="d-inline d-md-none">0xf943...d0b0</small>
                <span class="d-none d-md-inline">0xf943...d0b0</span>
                <img class="ms-1" style="width: 14px;height: 14px" src="" alt="">
              </a>
            </div>
          </div>
        </div>
        <hr class="mt-3 mb-4 mt-lg-3 mb-lg-4 mt-md-1 mb-md-1 d-block d-md-none mx-3" />
             
      </div>
      <!-- 作品描述 -->
      <div class="px-3 mt-3 mt-md-5">
        <h2><strong>作品描述</strong></h2>
        <h5 class="mb-0 d-block d-md-none">林冲，中国古典小说《水浒传》中的重要人物，绰号“豹子头”，东京（河南开封）人氏，梁山一百零八将之一。原是八十万禁军枪棒教头，因其妻子被太尉高俅的养子高衙内看上，而多次遭到陷害，最终被逼上梁山落草。后火并王伦，尊晁盖为梁山寨主。他参与了梁山一系列的战役，为山寨的壮大立下了汗马功劳。梁山大聚义时，排第六位，上应天雄星，位列马军五虎将，把守正西旱寨。抗击来围剿梁山军的官军、侵略北宋的辽国和剿灭国内造反的田虎、王庆、方腊势力时屡立战功。征方腊后病逝于杭州六和寺，追封忠武郎。</h5>
        <h6 class="mb-0 text-muted d-none d-md-block text-black-50">林冲，中国古典小说《水浒传》中的重要人物，绰号“豹子头”，东京（河南开封）人氏，梁山一百零八将之一。原是八十万禁军枪棒教头，因其妻子被太尉高俅的养子高衙内看上，而多次遭到陷害，最终被逼上梁山落草。后火并王伦，尊晁盖为梁山寨主。他参与了梁山一系列的战役，为山寨的壮大立下了汗马功劳。梁山大聚义时，排第六位，上应天雄星，位列马军五虎将，把守正西旱寨。抗击来围剿梁山军的官军、侵略北宋的辽国和剿灭国内造反的田虎、王庆、方腊势力时屡立战功。征方腊后病逝于杭州六和寺，追封忠武郎。</h6>
      </div>

      <!-- 品牌描述 -->
      <div class="px-3 mt-4 mt-md-5 mb-2">
        <h2><strong>品牌描述</strong></h2>
        <h6 class="mb-0 text-muted mb-1 text-black-50"><small>水浒英雄系列是NFT HERO旗下原创NFT项目，对水浒108将进行了精美绘制并以NFT的形态在ibox.com上首次发行。</small></h6>
        <a href="#" class="text-decoration-none">查看更多内容</a>
      </div>

       <!-- 作品描述 -->
      <div class="px-3 mt-3 mt-md-5">
        <h2><strong>关于NFT</strong></h2>
        <h5 class="mb-0 d-block d-md-none">
          NFT全称为Non-Fungible Token，可以通俗理解为区块链凭证。通常是指开发者在以太坊平台上根据ERC721或ERC1155标准/协议所发行，特性为不可分割、不可替代、独一无二。NFT常见于文化艺术品领域、知识产权的链上发行、流转、确权等作用，能有效保护链上知识产权，防止篡改、造假等，是区块链技术的一类场景应用。
        </h5>
        <h6 class="mb-0 text-muted d-none d-md-block text-black-50">
          <small>
            NFT全称为Non-Fungible Token，可以通俗理解为区块链凭证。通常是指开发者在以太坊平台上根据ERC721或ERC1155标准/协议所发行，特性为不可分割、不可替代、独一无二。NFT常见于文化艺术品领域、知识产权的链上发行、流转、确权等作用，能有效保护链上知识产权，防止篡改、造假等，是区块链技术的一类场景应用。
          </small>
        </h6>
      </div>
      <!-- table -->

      <div class="mx-3">
        <a href="javascript: void(0);" class="mt-5 mb-3 h4 text-decoration-none d-block user-select-auto text-black">
          <strong :class="dis == true ? 'me-5 ' : 'me-5 text-muted'" @click="hanldClick(true)">交易记录</strong>
          <strong :class="dis == true ? 'me-5 text-muted d-none d-md-inline' : 'me-5 d-none d-md-inline'" @click="hanldClick(false)">商品列表</strong>
        </a>
        
        <table-transaction v-if="currentCompoennt == 'tableTransaction'" :table="dataTable"></table-transaction>
        <table-commod v-if="currentCompoennt == 'tableCommod'" class="d-none d-md-block" :table="dataTable"></table-commod>
      </div>
    </div>

    
  </div>
</template>

<script>
import cardBuy from '../../components/card/card-buy.vue'
import tableTransaction from '../../components/table/table-transaction.vue'
import tableCommod from '../../components/table/table-commod.vue'
export default {
  name: "detail",
  data() {
    return {
      dataTable: [],
      dataTransection: [{
        user: '0x99254044d7d0647d57ce1bedf88b0cf4d3f19379',
        operation: '挂售 349.9USDT',
        date: '2021-09-07 14:51:18',
        detail: '查看'
      },{
        user: '0x99254044d7d0647d57ce1bedf88b0cf4d3f19379',
        operation: '挂售 349.9USDT',
        date: '2021-09-07 14:51:18',
        detail: '查看'
      }],
      dataCommod: [{
        id: 1,
        name: '	CyberZodiac#00003',
        sign: '250685',
        Owner: 'k',
        status: '在售',
        price: '19999 USDT',
        detail: '查看'
      }],
      currentCompoennt: 'tableTransaction',
      dis: true
    };
  },
  created() {
      this.dataTable = this.dataTransection
      
  },
  methods: {
    goTo(value){
      console.log(value);
    },
    hanldClick(value){
      this.dis = value
      this.currentCompoennt = value ? 'tableTransaction' : 'tableCommod'
      this.dataTable = value ? this.dataTransection : this.dataCommod
    }
  },
  mounted(){
    window.onresize = () => {
      if(window.innerWidth <= 768){
        this.hanldClick(true)
      }
    }
  },
  components: {
    cardBuy,
    tableTransaction,
    tableCommod
  }
};
</script>
<style scoped>
  .hanlde{
    color: black;
  }
</style>